<script lang="ts">
import { Component, Vue, PropSync, Prop } from 'vue-property-decorator'
import { CreateElement } from 'vue'

@Component({
  name: 'ImageViewer',
  components: {}
})
export default class extends Vue {
  @PropSync('visible', { type: Boolean, required: true })
  private show!: boolean
  @Prop({ type: String, required: true })
  private src!: string

  render (h: CreateElement) {
    let error = h(
      'div',
      {
        style: {
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          height: '276px',
          width: '100%',
          background: '#f5f7fa',
          fontSize: '32px',
          color: '#909399'
        },
        slot: 'error'
      },
      [h('i', { class: 'el-icon-picture-outline' })]
    )
    let preview = h('div', { class: 'preview-image-wrapper grid-background' }, [
      h(
        'el-image',
        {
          class: 'preview-image',
          attrs: { alt: 'image' },
          props: { src: this.src, fit: 'contain', lazy: true }
        },
        [error]
      )
    ])
    return h(
      'el-dialog',
      {
        props: { visible: this.show, title: 'image preview', width: '500px' },
        on: {
          'update:visible': (v: boolean) => {
            this.show = v
          }
        }
      },
      [preview]
    )
  }
}
</script>

<style lang="scss" scoped>
.preview-image-wrapper {
  padding: 5px 5px 2px;
  > .preview-image {
    width: 100%;
  }
}
</style>
